<template>
	<div class="demo">
		<div>一.全局组件</div>
		<blogpost></blogpost>
		<my-component></my-component>
		<br />
		<br />
		<div>二.局部组件</div>
		<component-a></component-a>
		<div>Vue.extend 局部创建组件 vm.$mount</div>
		<br />
		<div id="profile"></div>
	</div>
</template>
<script>
import Vue from "vue";

var ComponentA = { template: "<div class='dome-cnt'>局部组件注册</div>" };

export default {
	beforeCreate() {},
	data() {
		return {};
	},
	computed: {},
	components: {
		"component-a": ComponentA
	},
	methods: {}
};
</script>

<style scoped>
.tab-button {
	padding: 6px 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border: 1px solid #ccc;
	cursor: pointer;
	background: #f0f0f0;
	margin-bottom: -1px;
	margin-right: -1px;
}
.tab-button:hover,
.tab-button.active {
	background: #f00;
	color: #fff;
}
.dome-cnt {
	border: 1px solid #ccc;
	padding: 10px;
}
</style>
